<template>
	<div class="container-fluid wraper">
		<div class="login" v-if="!counter.isLogin">
			<div class="header">
				<router-link to="/login">欢迎使用北京林业大学信息学院研招系统</router-link>
			</div>
			<router-view></router-view>
		</div>
		<div v-if="counter.isLogin">
			<h1 class="title">
				北京林业大学信息学院研招系统
			</h1>
			
		<h3 class="flex-box">{{ counter.username }} 你好！</h3>
		<!-- <h3 class="flex-box">用户ID为 {{ counter.user_id }} </h3>
		<h3 class="flex-box">角色ID为 {{ counter.role_id }} </h3> -->
			<el-button @click="logout()">退出登录</el-button>
			<hr>
			<div class="container">
				<div class="nav flex-box">
					<!-- 导航区 -->
					<!-- 使用name跳转 -->
					<router-link active-class="active" class="list-group-item" :to="{name:'gongzuodan'}">招生目录</router-link>
					<!-- 使用to跳转 -->
					<router-link v-if="counter.role_id == 1 || counter.role_id == 8" active-class="active" class="list-group-item" :to="{path:'/dailymaintain'}">考生信息</router-link>
					<router-link v-if="counter.role_id == 2 || counter.role_id == 8" active-class="active" class="list-group-item" to="/inspectinfo">导师信息管理</router-link>
					<router-link v-if="counter.role_id == 2 || counter.role_id == 8" active-class="active" class="list-group-item" to="/test">导师确认志愿</router-link>
					<router-link v-if="counter.role_id == 1 || counter.role_id == 8" active-class="active" class="list-group-item" to="/assessinfo">志愿信息管理</router-link>
					<router-link v-if="counter.role_id == 1 || counter.role_id == 8" active-class="active" class="list-group-item" to="/keymaintenance">考生成绩管理</router-link>
					<!-- <router-link active-class="active" class="list-group-item" to="/usermanagement"> 用户管理</router-link> -->
				</div>
				<div>
					<div class="main">
						<!-- 占位一个展示区 -->
						<!-- <router-view></router-view> -->
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router';
	import { RouterView,RouterLink } from 'vue-router';
	import { useCounterStore } from '@/stores/counter'
	const counter = useCounterStore()
	import login from './views/login.vue';
	import { ref } from 'vue'
	const isLogin = ref(false);

	
	const router = useRouter();
	const logout = () => {
		sessionStorage.setItem('token', null);
		counter.logout()
		router.push('/login')
	}
</script>

<style scoped lang="scss">

	.login {
		.header {
			display: flex;
			justify-content: center;
			text-align: center;
			
			margin-bottom: 20px;
		}
	}


	.wraper {
		width: 100%;
		position: relative;
	}
	.wraper .title {
		padding: 20px;
		text-align: center;
		min-width: 610px;
	}
	.flex-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wraper .small{
		font-size: 15px;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		/* display: block; */
		/* margin: 0,auto; */
	}
	.list-group-item{
		margin-right: 10px;
	}
</style>
